<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
  <link rel="icon" href="https://fav.farm/🔥" />
</head>

<body>

  <div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>

  <style>
    html {
      color: black;
      font-family: sans-serif;
    }

    body {
      margin: 0;
    }

    .hero {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
    }

    h1 {
      text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
      font-size: 100px;
    }
  </style>

  <script>
    //设定横纵向初始值
    let transverse = 0;
    let direction = 0
    //获取鼠标偏移量
    let iniX = 0
    let iniY = 0
    const title = document.querySelector('h1')
    document.addEventListener('mousemove', (e) => {
      iniX = e.clientX - title.offsetLeft - title.offsetWidth / 2
      iniY = e.clientY - title.offsetTop - title.offsetHeight / 2
      direction = iniY / 2
      transverse = iniX / 2
      title.style.textShadow = `${transverse}px ${direction}px 0 rgba(255, 0, 255, 0.7), ${-transverse}px ${-direction}px 0 rgba(0, 255, 255, 0.7), ${-direction}px ${transverse}px 0 rgba(0, 255, 0, 0.7) , ${direction}px ${-transverse}px 0 rgba(0, 0, 255, 0.7)`
    })
  </script>
</body>

</html>